<template>
    <div>
      <el-dialog class="zczyYhChangeAll" title="中压注册用户批量变更" :visible.sync="show" v-if="show" width="30%" :before-close="handleCancel" :close-on-click-modal="false" v-dialogDrag>
        <el-form :model="changeAllForm" ref="changeAllForm" label-width="110px" :rules="changeAllFormRules">
          <el-form-item label="原线段编码">
            <el-input v-model="oldxdbm" disabled></el-input>
          </el-form-item>
          <el-form-item label="原线段名称">
            <el-input v-model="oldxdmc" disabled></el-input>
          </el-form-item>
          <el-form-item label="新线段编码" prop="xdbm">
            <el-row>
              <el-col :span="16">
                <el-input v-model="changeAllForm.xdbm" disabled></el-input>
              </el-col>
              <el-col :span="8" class="selectXdbm">
                <el-button type="primary" @click="selectXdbm">选择</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="新线段名称" prop="xdmc">
            <el-input v-model="changeAllForm.xdmc" disabled></el-input>
          </el-form-item>
          <el-form-item label="变更日期" prop="zcrq">
            <el-date-picker v-model="changeAllForm.zcrq" type="date" :picker-options="pickerDate" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium" @click="handleCancel">取 消</el-button>
          <el-button size="medium" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 选择线段编码 -->
      <GetXdbm ref="getXdbmRef" @handleGetXdbm="handleGetXdbm"></GetXdbm>
    </div>
</template>
<script>
import { changeZczyYhAll } from '@/api/sjwh/zczy.js';
import { currentDate, getPreDate } from '@/utils/moment.js';
import GetXdbm from "@/dialogCommom/GetXdbm";
export default {
    data() {
        return {
          show: false,
          changeAllForm: {
            czy: '',
            dwbm: '',
            ids: [],
            xdId: '',
            xdbm: '',
            xdmc: '',
            yxZytdyhValidYhZxrqVO: {
                dwbm: '',
                yhId: [],
                zxrq: ''
            },
            zcZyyhsjValidZxrqVO: {
                dwbm: '',
                ids: [],
                zxrq: ''
            },
            zcrq: ''
          },
          oldxdmc: '',
          oldxdbm: '',
          changeAllFormRules: {
            xdbm: [
                { required: true, message: '请选择新线段编码', trigger: 'blur' }
            ],
            xdmc: [
                { required: true, message: '请选择新线段名称', trigger: 'blur' }
            ],
            zcrq: [
                { required: true, message: '请选择变更日期', trigger: 'blur' }
            ]
          },
          pickerDate: { // 变更日期选择不能超过当前日期
            disabledDate: time => {
                return (
                    time.getTime() > new Date()
                );
            }
          }
        }
    },
    props: {
      propChangeAllData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propChangeAllData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.show) {
            const that = this
            that.show = newVal.show
            let ids = []
            newVal.obj.forEach(item => {
                ids.push(item.id)
            })
            that.changeAllForm = {
                czy: newVal.obj[0].czy,
                dwbm: newVal.obj[0].dwbm,
                ids: ids,
                xdId: '',
                xdbm: '',
                xdmc: '',
                yxZytdyhValidYhZxrqVO: {
                    dwbm: newVal.obj[0].dwbm,
                    yhId: ids,
                    zxrq: ''
                },
                zcZyyhsjValidZxrqVO: {
                    dwbm: newVal.obj[0].dwbm,
                    ids: ids,
                    zxrq: ''
                },
                zcrq: currentDate()
            }
            that.oldxdbm = newVal.obj[0].xdbm
            that.oldxdmc = newVal.obj[0].xdmc
          }
        }
      }
    },
    components: {
      GetXdbm
    },
    methods: {
      /* 取消 */
      handleCancel() {
        const that = this
        that.show = false
        that.changeAllForm = {
            czy: '',
            dwbm: '',
            ids: [],
            xdId: '',
            xdbm: '',
            xdmc: '',
            yxZytdyhValidYhZxrqVO: {
                dwbm: '',
                yhId: [],
                zxrq: ''
            },
            zcZyyhsjValidZxrqVO: {
                dwbm: '',
                ids: [],
                zxrq: ''
            },
            zcrq: ''
        }
        that.oldxdmc = ''
        that.oldxdbm = ''
      },

      /* 确定 */
      handleSubmit() {
        const that = this
            that.$refs['changeAllForm'].validate(async valid => {
            if (valid) {
                that.changeAllForm.yxZytdyhValidYhZxrqVO.zxrq = getPreDate(that.changeAllForm.zcrq)
                that.changeAllForm.zcZyyhsjValidZxrqVO.zxrq = getPreDate(that.changeAllForm.zcrq)
                let res = await changeZczyYhAll(that.changeAllForm)
                if (res.code == 0 && res.data) {
                    that.$message.success('中压注册用户批量变更成功')
                    that.handleCancel()
                    that.$emit("updateZczyYhTable")
                } else {
                    that.$message.error(res.message)
                }
            }
            })
        },

        /* 选择新线段编码 */
        selectXdbm() {
          const that = this
          that.$refs.getXdbmRef.openXdbm()
        },

        /* 线段编码组件回传 */
        handleGetXdbm(val) {
          const that = this
          if (val[0].data.xdbm == that.oldxdbm) {
            that.$message.warning('不能选择原线段编码')
            return false
          }
          that.changeAllForm.xdbm = val[0].data.xdbm
          that.changeAllForm.xdmc = val[0].data.xdmc
          that.changeAllForm.xdId = val[0].data.xdid
        }
    }
}
</script>
<style lang="scss" scoped>
.zczyYhChangeAll /deep/ .el-input-number {
  width: 100%;
}
.zczyYhChangeAll /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.zczyYhChangeAll /deep/ .el-date-editor.el-input {
    width: 100%;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}
.selectXdbm {
  padding-left: 10px;
}
.selectXdbm /deep/ .el-button--primary {
  width: 100%;
}    
/deep/ .el-dialog__body {
  padding: 10px 20px 1px;
}    
</style>
